page {
    background-color: #f3f3f3;
}

.content {
    &-showfn{
        padding-bottom: 0rpx;
        padding-bottom: calc(420rpx + constant(safe-area-inset-bottom));
        padding-bottom: calc(420rpx + env(safe-area-inset-bottom) );
        /* #ifdef MP-WEIXIN */
        /* #endif */
    }
    &-box {
        width: 100%;
        height: auto;
        min-height: calc(100vh - env(safe-area-inset-top) - 200rpx);
        box-sizing: content-box;
        position: relative;
        padding-bottom: 120rpx;
        
        /* #ifdef APP-PLUS  */
        margin-bottom: 0rpx;
        margin-bottom: constant(safe-area-inset-bottom);
        margin-bottom: env(safe-area-inset-bottom);
        /* #endif */
        /* #ifdef MP-WEIXIN */
        padding-bottom: 0rpx;
        padding-bottom: calc(120rpx + constant(safe-area-inset-bottom));
        padding-bottom: calc(120rpx + env(safe-area-inset-bottom) );
        /* #endif */
    
        &-bg {
            width: 100%;
            position: fixed;
            /* #ifdef MP-WEIXIN */
            bottom: 0;
            bottom: constant(safe-area-inset-bottom);
            bottom: env(safe-area-inset-bottom);
            /* #endif */
            /* #ifndef MP-WEIXIN */
            top: 0;
            left: 0;
            /* #endif */
        }

        &-loading {
            text-align: center;
            padding: 20rpx 0;
        }

        .message {
            padding: 13rpx 20rpx;
        }
        
        .message-item {
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            align-content: flex-start;
            flex-wrap: nowrap;
            flex-direction: row;

            .img {
                width: 80rpx;
                height: 80rpx;
                border-radius: 40rpx;
            }

            .content {
                padding: 20rpx;
                max-width: 500rpx;
                border-radius: 10rpx;
                font-size: 28rpx;
            }
            
            // 语音
            .contentType2 {
                display: flex;
                flex-direction: row;
                align-items: center;
                .voice_icon {
                    height: 34rpx;
                    width: 34rpx; 
                    background-repeat: no-repeat;
                    background-size: 100%;
                }
                .voice_icon_right {
                    background-image: url(../../static/chat/voice-left-3.png);
                    margin-left: 10rpx;
                }
                .voice_icon_left {
                    background-image: url(../../static/chat/voice-right-3.png);
                    margin-right: 10rpx;
                }
                .voice_icon_right_an {
                    animation: voiceAn_right 1s linear alternate infinite;
                }
                .voice_icon_left_an {
                    animation: voiceAn_left 1s linear alternate infinite;
                }
                @keyframes voiceAn_right {
                    0% {
                        background-image: url(../../static/chat/voice-left-1.png);
                    }
                    50% {
                        background-image: url(../../static/chat/voice-left-2.png);
                    }
                    100% {
                        background-image: url(../../static/chat/voice-left-3.png);
                    }
                }
                @keyframes voiceAn_left {
                    0% {
                        background-image: url(../../static/chat/voice-right-1.png);
                    }
                    50% {
                        background-image: url(../../static/chat/voice-right-2.png);
                    }
                    100% {
                        background-image: url(../../static/chat/voice-right-3.png);
                    }
                }
            }
            
            //图片
            .contentType3{
                padding: 0;
                border-radius: 2rpx;
                background-color: transparent !important;
                .img{
                    width: 200rpx;
                    height: auto;
                    max-width: 300rpx;
                    max-height: 400rpx;
                }
            }
            .contentType3::after{
                border: none !important;
                display: none !important;
            }
            .content-type-right {
                flex-direction: row-reverse;
            }

            &.right {
                flex-direction: row-reverse;

                .content {
                    background-color: $uni-color-success;
                    margin-right: 28rpx;
                    word-break: break-all;
                    line-height: 36rpx;
                    position: relative;

                    &::after {
                        content: '';
                        display: block;
                        width: 0;
                        height: 0;
                        border-top: 10rpx solid transparent;
                        border-bottom: 10rpx solid transparent;
                        border-left: 16rpx solid $uni-color-success;
                        position: absolute;
                        right: -16rpx;
                        top: 30rpx;
                    }
                }
            }

            &.left {
                .content {
                    background-color: $uni-text-color-inverse;
                    margin-left: 28rpx;
                    word-break: break-all;
                    line-height: 36rpx;
                    position: relative;

                    &::after {
                        content: '';
                        display: block;
                        width: 0;
                        height: 0;
                        border-top: 10rpx solid transparent;
                        border-bottom: 10rpx solid transparent;
                        border-right: 16rpx solid $uni-text-color-inverse;
                        position: absolute;
                        left: -16rpx;
                        top: 30rpx;
                    }
                }
            }
        }
    }

    .input-box {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        // height: 100rpx; 这里不能加高度。否则菜单出不来
        box-sizing: content-box;
        z-index: 999;
        background-color: #fff;
        box-shadow: 0 -1rpx 1rpx rgba($color: #000000, $alpha: 0.16);
        
        /* #ifdef APP-PLUS */
        margin-bottom: 0rpx;
        margin-bottom: constant(safe-area-inset-bottom);
        margin-bottom: env(safe-area-inset-bottom);
        /* #endif */
        /* #ifdef MP-WEIXIN */
        padding-bottom: 0rpx;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
        /* #endif */

        &-flex {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: nowrap;
            flex-direction: row;
            padding: 0 30rpx;
            box-sizing: border-box;
            image{
                width: 56rpx;
                height: 56rpx;
            }
            .icon_img {
                margin-right: 20rpx;
            }
            .icon_btn_add{
                margin-left: 20rpx;
            }
            &-grow {
                flex-grow: 1;
                .content-wrap {
                    position: relative;
                    width: 555rpx;
                    height: 64rpx;
                    border-radius: 40rpx;
                    background-color: #f7f7f7;
                    -webkit-filter: drop-shadow(-1rpx -1rpx 1rpx rgba($color: #000000, $alpha: 0.16)); /* Chrome, Safari, Opera */
                    filter: drop-shadow(-1rpx -1rpx 1rpx rgba($color: #000000, $alpha: 0.16));
                    .content {
                        position: absolute;
                        top: 0;
                        left: 0;
                        box-sizing: border-box;
                        background-color: #f7f7f7;
                        width: 555rpx;
                        height: 64rpx;
                        padding: 0 10rpx;
                        border-radius: 40rpx;
                        font-size: 28rpx;
                        margin-left: 10rpx;
                    }
                    .em { // 表情
                        position: absolute;
                        right: 3%;
                        top: 15%;
                    }
                }
                
                .voice_title {
                    // text-align: center;
                    // background-color: #ffffff;
                    // height: 80rpx;
                    // line-height: 80rpx;
                    // border-radius: 12rpx;
                }
            }

            .btn {
                margin-left: 30rpx;
                // background-color: $u-type-success;
                // border: none;
            }
        }
        
        .fun-box{
            opacity: 0;
            transition: all 0.1s ease-in-out;
            height: 0;
            .grid-text{
                padding-top: 10rpx;
                color: $uni-text-color-grey;
            }
            
        }
        .show-fun-box{
            opacity: 1;
            height: 300rpx;
        }
    }

    .input-box-mpInputMargin {
        /* #ifdef MP-WEIXIN */
        padding-bottom: 0rpx;
        /* #endif */
    }
    .voice_an{
        width: 300rpx;
        height: 300rpx;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-55%);
        background-color: rgba(41,41,41,0.7);
        color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        border-radius: 10rpx;
        .text{
            padding-top: 30rpx;
        }
        @keyframes runVoice{
            0%{
                height: 10%;
            }
            20%{
                height: 50%;
            }
            50%{
                height: 100%;
            }
            80%{
                height: 50%;
            }
            100%{
                height: 0%;
            }
        }   
        .wave{
            width:6rpx;
            height: 100%;
            margin-left: 10rpx;
            border-radius: 50rpx;
            background-color: #999;
            vertical-align: middle;
            display: inline-block;
        }
        .voice_an_icon{
            width: 200rpx;
            height: 100rpx;
            line-height: 50rpx;
            margin: 50rpx 0;
        }
        .voice_an_icon #one{
            animation:runVoice 0.6s infinite 0.1s;
        }
        .voice_an_icon #two{
            animation:runVoice 0.6s infinite 0.3s;
        }
        .voice_an_icon #three{
            animation:runVoice 0.6s infinite 0.6s;
        }
        .voice_an_icon #four{
            animation:runVoice 0.6s infinite 0.1s;
        }
        .voice_an_icon #five{
            animation:runVoice 0.6s infinite 0.3s;
        }
        .voice_an_icon #six{
            animation:runVoice 0.6s infinite 0.6s;
        }
        .voice_an_icon #seven{
            animation:runVoice 0.6s infinite 0.1s;
        }
    }
}
